<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeTools :data="company" :is-root="true" @addDepartment="addDepartment" />
        <hr>
        <el-tree :data="treeDate" :props="{label:'name'}" default-expand-all>
          <template
            #default="obj"
          >
            <treeTools
              :data="obj.data"
              @delDepartment="delDepartment"
              @addDepartment="addDepartment"
              @editDepartment="editDepartment"
            />
            <template />
          </template></el-tree>
      </el-card>
      <addDepartment ref="department" :show-dialog="showDialog" :data="addData" @comfirm="comfirm" @cancel="cancel" />
    </div>
  </div>
</template>

<script>
import treeTools from './component/treeTools'
import addDepartment from './component/addDepartment'
import { getDepartmentList } from '@/api/department'
import { updateDepartmentList } from '@/utils/index'
export default {
  components: {
    treeTools, addDepartment
  },
  data() {
    return {
      treeDate: [],
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      showDialog: false,
      addData: {}
    }
  },
  async created() {
    this.getDepartment()
  },
  methods: {
    // 删除部门
    delDepartment() {
      this.getDepartment()
    },
    // 获取部门列表
    async getDepartment() {
      const res = await getDepartmentList()
      this.treeDate = updateDepartmentList(res.depts, '')
    },
    // 新增部门
    addDepartment(data) {
      this.showDialog = true
      this.addData = data
    },
    // 编辑部门
    editDepartment(data) {
      this.showDialog = true
      this.addData = data
      this.$refs.department.edit(this.addData.id)
    },
    // 确定时关闭弹窗
    comfirm() {
      this.showDialog = false
      this.getDepartment()
    },
    // 取消时关闭弹窗
    cancel() {
      this.showDialog = false
    }
  }

}
</script>

<style>

</style>
